<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr/>
    <h2>当前的信息为：{{msg}}</h2>
    <button @click="msg+='!'">修改信息</button>
    <hr/>
    <h2>一个人的信息</h2>
    <h3>姓名：{{person.name}}</h3>
    <h3>年龄：{{person.age}}</h3>
    <h3>薪资：{{person.job.j1.salary}}k</h3>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age++">增加年龄</button>
    <button @click="person.job.j1.salary++">加薪</button>
</template>

<script>
//vue3中监视属性是组合api
import { ref, reactive, watch } from 'vue';
export default {
  name: 'Demo', 
  setup() {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = ref({
        name: '张三',
        age: 18,
        job: {
            j1: {
                salary: 20, 
            }
        }
    })

    console.log(sum, sum.value) //sum是一个RefImpl对象，sum.value是0

    //基本类型不能写成监视sum.value，sum.value相当于是一个常量值
    watch(sum, (newValue, oldValue)=>{
        console.log(`sum的值从${oldValue}变成了${newValue}`)
    })

    //对象类型如果是ref定义，直接监视person是无效的。
    //解决方法：
    //1.写成监视person.value（监视RefImpl中的通过reactive生成的Proxy对象value） 
    //2.开启深度监视（监视RefImpl中的value的深层的属性）
    console.log(person, person.value)
    watch(person, (newValue, oldValue)=>{
        console.log(`person的值变成了`, newValue)
    }, {
        deep: true
    })

    return {
        sum,
        msg,
        person,
    }
  }
}
</script>

<style>
</style>